<template>
  <div>
    <el-button size="medium" type="primary" plain @click="add"
      >新增员工档案信息</el-button
    >
    <el-table :data="tableData" border stripe style="width: 100%">
      <el-table-column prop="employeeName" label="职工姓名" fit>
      </el-table-column>
      <el-table-column prop="employeeSex" label="性别" fit> </el-table-column>
      <el-table-column prop="employeeIdcard" label="身份证号" fit>
      </el-table-column>
      <el-table-column prop="employeeEmail" label="手机号" fit>
      </el-table-column>
      <el-table-column prop="employeeAge" label="年龄" fit> </el-table-column>
      <el-table-column prop="employeeAge" label="年龄" fit> </el-table-column>
      <el-table-column
        prop="goodsAmount"
        label="商品金额"
        fit
      ></el-table-column>
      <el-table-column prop="startTime" label="上架时间" fit> </el-table-column>
      <el-table-column prop="endTime" label="下架时间" fit> </el-table-column>
      <el-table-column prop="goodsPaymentAdvance" label="预付款" fit>
      </el-table-column>

      <!-- <el-table-column label="预付款" width="120">
                <template slot-scope="scope">
                    <el-button @click="editUser(scope.row)" type="text" size="small">
                        编辑
                    </el-button>
                    <el-divider direction="vertical"></el-divider>
                    <el-button @click="deleteUser(scope.row)" type="text" size="small">
                        删除
                    </el-button>
                </template>
            </el-table-column> -->
    </el-table>

    <!-- <el-pagination class="page" background layout="prev, pager, next" :total="total"
            @current-change="handleCurrentChange" :page-size="8">
        </el-pagination> -->

    <!-- 添加/修改用户对话框 -->
    <el-dialog
      :visible.sync="dialogVisible"
      width="50%"
      :show-close="false"
      :title="dialogTitle"
    >
      <el-form
        :model="coninfo"
        ref="coninfo"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="商品名称" prop="goodsName">
          <el-input v-model="coninfo.goodsName"></el-input>
        </el-form-item>
        <el-form-item label="商品描述" prop="goodsDescription">
          <el-input v-model="coninfo.goodsDescription"></el-input>
        </el-form-item>
        <el-form-item label="商品数量" prop="goodsCount">
          <el-input v-model="coninfo.goodsCount"></el-input>
        </el-form-item>
        <el-form-item label="商品金额" prop="goodsAmount">
          <el-input v-model="coninfo.goodsAmount"></el-input>
        </el-form-item>
        <el-form-item label="上架时间" prop="startTime">
          <el-date-picker
            v-model="coninfo.startTime"
            type="datetime"
            placeholder="选择日期时间"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="下架时间" prop="endTime">
          <el-date-picker
            v-model="coninfo.endTime"
            type="datetime"
            placeholder="选择日期时间"
          >
          </el-date-picker>
        </el-form-item>

        <el-form-item label="预付款" prop="goodsPaymentAdvance">
          <el-input v-model="coninfo.goodsPaymentAdvance"></el-input>
        </el-form-item>

        <el-form-item prop="goodsImage">
          <el-upload
            action="/api/upload"
            list-type="picture-card"
            :auto-upload="true"
            :on-success="uploadSuccess"
          >
            <i slot="default" class="el-icon-plus"></i>
            <div slot="file" slot-scope="{ file }">
              <img
                class="el-upload-list__item-thumbnail"
                :src="file.url"
                alt=""
              />
            </div>
          </el-upload>
          <!-- <el-dialog :visible.sync="dialogVisible">
                        <img width="100%" :src="dialogImageUrl" alt="">
                    </el-dialog> -->
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitBtnDialog('coninfo')"
          >确 定</el-button
        >
        <el-button @click="cancleBtn">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import dayjs from "dayjs";
export default {
  components: {},
  data() {
    return {
      goodsImage: [],
      //图片路径
      dialogImageUrl: "",
      // 隐藏
      dialogVisible: false,

      //表格数据
      tableData: [],
      //是否展示对话框
      dialogVisible: false,
      //对话框标题
      dialogTitle: "",
      //提交的表单数据
      coninfo: {},
      //表单校验规则
      // rules: {
      //     name: [
      //         { required: true, message: "请输入竞赛名称", trigger: "change" },
      //     ],
      //     contestTime: [
      //         { required: true, message: "请选择时间", trigger: "change" },
      //     ],
      //     level: [{ required: true, message: "请选择级别", trigger: "change" }],
      //     category: [
      //         { required: true, message: "请选择类别", trigger: "change" },
      //     ],
      // },
      //角色选择列表
      roleOptions: [],
      //名称下拉框
      names: [],
      //级别下拉框
      options: [],
      //类别下拉框
      category: [],
      //总数页
      total: 0,
      //记录当前页数
      pages: 1,
    };
  },
  created() {
    // this.initTable();
    // this.initTotal();
    // this.initSelectname();
    // this.initSelectLevel();
    // this.initSelectcontest();
    this.getTableData();
    // this.getAllOrder()
    // this.getGoodsImgs()
    // this.uploadSuccess()
  },

  methods: {
    uploadSuccess(res, file, fileList) {
      this.coninfo.goodsImage = [res.data];
      this.coninfo.endTime = dayjs(this.coninfo.endTime).format(
        "YYYY-MM-DD HH:mm:ss"
      );
      this.coninfo.startTime = dayjs(this.coninfo.startTime).format(
        "YYYY-MM-DD HH:mm:ss"
      );
    },
    getTableData() {
      this.$axios.get("/goods/getGoodsList").then((res) => {
        console.log("tableList", res);
      });
    },
    getAllOrder() {
      this.$axios.get("/order/getAll").then((res) => {
        console.log("OrderList", res);
      });
    },
    getGoodsImgs() {
      this.$axios
        .get("/goodsImage/08dd4a2c-6ed3-476d-bbb8-2d1370037258.jpg")
        .then((res) => {
          console.log("goodsImgs", res);
        });
    },

    //添加用户按钮
    add() {
      this.dialogTitle = "添加新商品";
      this.dialogVisible = true;
    },

    //编辑按钮
    editUser(data) {
      this.dialogVisible = true;
      this.dialogTitle = "编辑新竞赛信息";
      this.coninfo = this.deepCopy(data);
    },

    //对话框取消按钮
    cancleBtn() {
      this.dialogVisible = false;
      this.$refs["coninfo"].resetFields();
      this.reset();
    },
    //表单提交
    submitBtnDialog() {
      console.log(190, this.coninfo);
      this.$axios.post("/goods/addGoods", this.coninfo).then((res) => {
        console.log("res", res);
      });
    },
  },
};
</script>

<style scoped>
.page {
  text-align: center;
}
</style>
